<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Setup Box</title>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />
	<title>Order SetupBox</title>
	<style>
.myTable td:nth-child(1) {
	width: 25px;
}

.feild-input {
	float: left;
	margin-bottom: 4px;
	margin-top: 4px;
	width: 100%;
}

.feild-input label {
	float: left;
	margin-right: 4px;
	text-align: right;
	width: 20%;
}

.feild-action {
	width: 100%;
	height: 20%;
	float: right;
}

.feild-action button {
	float: right;
	margin-right: 5px;
}
.menu3 {
	box-shadow: 6px 11px 10px;
}
</style>
</h:head>

<h:body>


	<p:ajaxStatus
		style="bottom: 68%;
	    height: 32px;
	    position: fixed;
	    right: 50%;
	    width: 32px;
	    z-index: 99999;">
		<f:facet name="start">
			<p:graphicImage value="images/loading.gif" />
		</f:facet>

		<f:facet name="complete">
			<h:outputText value="" />
		</f:facet>
	</p:ajaxStatus>
	<p:growl id="growl" showDetail="true" sticky="false" />
	<ui:insert name="header">
		<ui:include src="/header/header_dth.xhtml" />
	</ui:insert>
	<div class="dth_body_home" style="height: 100%">
		<ui:insert name="header_banner">
			<ui:include src="/header/header_banner.xhtml" />
		</ui:insert>

		<div class="">
			<div style="margin-left: 7%; width: 86%;">
				<h:form id="form">
					<br></br>
					<div>
						<h:outputText
							style="color: #ff6000;font-size: 30px;font-weight: bold;"
							value="#{msg['setupbox_order_home_ht']}"></h:outputText>
						<ul style="font-size: 15px;">
							<li>
								<p>
									<h:outputLink value="login.xhtml"
										style="text-decoration: none !important;">
										<h:outputText value="#{msg['menu_login']} " />
									</h:outputLink>
									<h:outputText value="#{msg['setupbox_order_home_qa']} " />
									<h:outputLink value="register.xhtml"
										style="text-decoration: none !important;">
										<h:outputText value="#{msg['setupbox_order_home_rg']}" />
									</h:outputLink>
								</p>
							</li>
							<li>
								<h:outputText value="#{msg['setupbox_order_home_s']}" />
							</li>
						</ul>
					</div>
					<br></br>

					<p:separator id="separator" />
					<br></br>
					<p:dataGrid var="item" value="#{setupboxBean.listSetupBox}"
						columns="3" rows="6" paginator="true" paginatorPosition="bottom"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">

						<div
							style="font-family: cursive; width: 100%; height: 250px; border: solid 2px; margin-top: 15px; border-radius: 10px 10px 10px 10px">

							<div
								style="width: 100%; height: 50px; background-color: #35718D; font-size: x-large; font-weight: bold; color: white;">
								<h3 style="margin-top: 0px">#{item.type}</h3>
							</div>
							<div style="float: left;">
								<img width="150px" height="200" src="images/#{item.image}"
									alt="#{item.type}" />
							</div>
							<div
								style="float: left; font-size: large;; font-weight: bold; color: white;">
								<div
									style="color: #35718D; width: 100%; margin-left: 10px;">
									<p><h:outputText value="#{msg['price']} : "/>#{item.priceStr}$</p>
								</div>
								<p:commandLink onclick="dlg.show()" update=":dlgform:dlgOrder"
									style="margin-left: 10px">
									<f:param value="update" name="action"></f:param>
									<f:param value="#{item.id}" name="setupbox_id"></f:param>
									<img src="images/shopping_cart_down.png" title="Buy"
										style="margin-left: 35px" />
								</p:commandLink>
							</div>

						</div>
						<!--  
				        <p:panel header="#{item.type}" style="text-align:center;">  
				            <h:panelGrid columns="1" style="width:100%">  
				                <div style="float: left; width:100%; height:150px;"><img width="250px" height="150px" src="images/#{item.image}" alt="#{item.type}" /></div> 
				  				<p style="font-weight: bold;font-size: 10px">Price : #{item.price} </p>
				                <p:commandLink onclick="dlg.show()" update=":dlgform:dlgOrder" style="margin-left: 10px">
									<f:param value="update" name="action"></f:param>
									<f:param value="#{item.id}" name="setupbox_id"></f:param>
									<img src="images/shopping_cart.png" title="Buy" />
								</p:commandLink>
				                
					         </h:panelGrid>  
					    </p:panel>  
					  	-->
					</p:dataGrid>

				</h:form>
				<p:separator />
			</div>

			<h:form id="dlgform">
				<p:dialog header="#{msg['setupbox_order_home_dg']} " widgetVar="dlg" id="dlg"
					width="500" height="580" resizable="false" modal="true"
					draggable="false">
					<h:panelGroup rendered="#{loginBean.logined==false}">
						<div style="font-size: 25px; margin-left: 55px; margin-top: 25px">
							<h:outputLink value="login.xhtml"
								style="text-decoration: none !important; margin-left:20px;color:blue">
								<h:outputText value="#{msg['setupbox_order_home_lg']}" />
							</h:outputLink>
						</div>
					</h:panelGroup>
					<h:panelGroup id="dlgOrder" rendered="#{loginBean.logined==true}">
						<h:inputHidden value="#{setupboxBean.id}"></h:inputHidden>

						<table style="font-family: cursive; font-size: x-large;">
							<br></br>
							<br></br>
							<tr style="height: 60px"> 
								<td style="text-align: right;"><h:outputText value="#{msg['type']}: "/><br></br></td>
								<td style="text-align: left:;"><span
									style="margin-left: 20px"></span>#{setupboxBean.type}<br></br>
								</td>
							</tr>

							<tr style="height: 60px">
								<td style="text-align: right;"><h:outputText value="#{msg['description']}: "/><br></br>
								</td>
								<td style="text-align: left:; margin-left: 20px"><span
									style="margin-left: 20px"></span> <h:outputText
										value="#{setupboxBean.des}" escape="false"></h:outputText><br></br></td>

							</tr>

							<tr style="height: 60px">
								<td style="text-align: right;"><h:outputText value="#{msg['price']}: "/><br></br></td>
								<td style="text-align: left:;"><span
									style="margin-left: 20px"></span>#{setupboxBean.priceStr}$ <br></br></td>
							</tr>
							<tr style="height: 60px">
								<td style="text-align: right;"><h:outputText value="#{msg['setupbox_order_home_qua']} : "/><br></br></td>
								<td style="text-align: left:;"><span
									style="margin-left: 20px"></span> <h:inputText
										value="#{ordersetupboxBean.quantity}"
										converterMessage="Cannot convert to double.">
										<f:validateDoubleRange minimum="1" maximum="10000" />
									</h:inputText> <br></br></td>
							</tr>
							<tr style="height: 60px">
								<td colspan="2">
									<div class="feild-action">
										<p:commandButton style="margin-left:10px" value="#{msg['btn_ok']}"
											oncomplete="dlg.hide()" validateClient="true"
											action="#{ordersetupboxBean.insertOrder()}"
											update=":growl,:panel:form2:mainform2,:payment,:dlgform:dlgOrder">
											<f:param value="insert" name="action"></f:param>
											<f:param value="#{setupboxBean.id}" name="setupbox_id"></f:param>
											<f:param value="#{setupboxBean.type}" name="setupbox_type"></f:param>
											<f:param value="#{setupboxBean.price}" name="setupbox_price"></f:param>
										</p:commandButton>
										<p:commandButton style="margin-left:10px" value="#{msg['btn_cancel']}" onclick="dlg.hide()"></p:commandButton>
									</div>
								</td>
								
							</tr>
						</table>
						
					</h:panelGroup>

				</p:dialog>
			</h:form>

		</div>
		<br></br> <br></br>
		<div style="font-family: cursive; font-size: 25px;">
			<div
				style="width: 100%; height: 50px; background-color: #CA96D9; border-radius: 5px 5px 0px 0px">
				<h2
					style="font-weight: bold; color: white; text-align: left; margin-top: 10px; margin-left: 30px"><h:outputText value="#{msg['setupbox_order_home_cart']}"/></h2>
			</div>
			<p:accordionPanel id="panel">
				<p:tab title="#{msg['Detail']}">
					<h:form id="form2">
						<h:panelGroup id="mainform2">
							<p:dataTable rendered="#{loginBean.logined==true}"
								styleClass="myTable" var="item" editable="true"
								rowIndexVar="row"
								filteredValue="#{ordersetupboxBean.filteredOrders}"
								value="#{ordersetupboxBean.listOrderSetupBox2}"
								scrollable="true" scrollHeight="170">
								<p:ajax event="rowEdit" listener="#{ordersetupboxBean.onEdit}"
									update=":growl,:panel:form2:total,:payment" />
								<p:ajax event="rowEditCancel"
									listener="#{ordersetupboxBean.onCancel}" update=":growl" />
								<p:column headerText="Stt" style="width:30px">
									<h:outputText value="#{row+1}" />
								</p:column>
								<p:column headerText="#{msg['type']}" style="width:150px"
									filterMatchMode="contains" filterBy="typeSTB">
									<h:outputText style="float:left;" value="#{item.typeSTB}" />
								</p:column>

								<p:column headerText="#{msg['setupbox_order_home_qua']}" style="width:130px"
									label="quantity">
									<p:cellEditor>
										<f:facet name="output">
											<h:outputText value="#{item.quantity}" />
										</f:facet>
										<f:facet name="input">
											<p:inputText value="#{ordersetupboxBean.quantity}"
												style="width:100%" />
										</f:facet>
									</p:cellEditor>
								</p:column>
								<p:column headerText="#{msg['price']}/ 1sp" style="width:130px">
									<h:outputText style="float:left;" value="#{item.priceSTB}$" />
								</p:column>
								<p:column headerText="#{msg['date_insert']}:"  filterMatchMode="contains" filterBy="dateInsert">
									<h:outputText style="float:left;" value="#{item.dateInsert}" />
								</p:column>
								

								<p:column headerText="#{msg['btn_delete']}" style="width:100px;">
									<p:commandLink action="#{ordersetupboxBean.delete()}"
										style="float:left;margin-right:15px;margin-left:30px;margin-top:7px;"
										update=":panel:form2:mainform2,:payment">
										<f:param value="#{item.id}" name="setupboxorder_id"></f:param>
										<img src="images/del.jpg" title="delete" />
									</p:commandLink>
								</p:column>
								<p:column headerText="#{msg['btn_edit']}" style="width:60px">
									<img src="images/down.png" title="click below" />
									<p:rowEditor />
								</p:column>
							</p:dataTable>
							<div style="margin-top: 2px"></div>
							<div
								style="float: right; height: 30px; font-family: cursive; font-size: x-large;">
								<!-- <p:commandButton style="background-color: rgb(145, 221, 231);" value="Payment"/> -->

							</div>
							<div
								style="float: right; height: 30px; font-family: cursive; font-size: 35px; margin-right: 10px;">
								<h:outputText id="total"
									value="#{msg['recharge_home_total']}: #{ordersetupboxBean.Total()}$  "></h:outputText>
							</div>


						</h:panelGroup>
					</h:form>
				</p:tab>
			</p:accordionPanel>
		</div>
	</div>
	<ui:insert name="footer">
		<ui:include src="/footer/footer_dth.xhtml" />
	</ui:insert>
	<h:form>
		<p:stack icon="/images/pay.jpg" widgetVar="aaa"
			rendered="#{loginBean.logined==true}">

			<p:menuitem value="Discover" icon="/images/discover.png"
				oncomplete="PF('bar').show()" update=":payment">
				<f:param value="Discover" name="PayType"></f:param>
				<f:param value="discoverB.png" name="PayImgB"></f:param>
			</p:menuitem>
			<p:menuitem value="AmericanExpress" icon="/images/express.png"
				oncomplete="PF('bar').show()" update=":payment">
				<f:param value="AmericanExpress" name="PayType"></f:param>
				<f:param value="expressB.png" name="PayImgB"></f:param>
			</p:menuitem>
			<p:menuitem value="MasterCard" icon="/images/mastercard.JPG"
				oncomplete="PF('bar').show()" update=":payment">
				<f:param value="MasterCard" name="PayType"></f:param>
				<f:param value="mastercardB.jpg" name="PayImgB"></f:param>
			</p:menuitem>
			<p:menuitem value="ViSa" icon="/images/visa.jpg"
				oncomplete="PF('bar').show()" update=":payment">
				<f:param value="ViSa" name="PayType"></f:param>
				<f:param value="visab.jpg" name="PayImgB"></f:param>
			</p:menuitem>
		</p:stack>
	</h:form>
	<p:notificationBar rendered="#{loginBean.logined==true}" id="payment"
		position="bottom" effect="slide" widgetVar="bar" styleClass="bottom"
		style="margin-left:20% ;width:800px;height:250px;border-radius:10px 10px 0px 0px;border-color:green ;border-width: 2px ;background-image: url('images/#{ordersetupboxBean.getPayImgB()}') ;">
		<div style="font-family: cursive; font-size: 25px;">
			<h:outputText value="#{msg['setupbox_order_home_paying']} #{ordersetupboxBean.payType}"
				style="color:#FFCC00;font-size:36px;"></h:outputText>
			<br /> <br />
			<h:outputLabel value="#{msg['setupbox_order_home_payingcard']}: ">
				<p:spacer width="20"></p:spacer>
			</h:outputLabel>
			<h:inputText style="height:30px" required="true"></h:inputText>
			<br />
			<h:outputLabel value="#{msg['login_password']}: ">
				<p:spacer width="7"></p:spacer>
			</h:outputLabel>
			<h:inputSecret style="height:30px;margin-left:10px;margin-top:5px"
				required="true"></h:inputSecret>
			<br />
			<h:outputLabel for="a" value="#{msg['recharge_home_total']}: ">
				<p:spacer width="20"></p:spacer>
			</h:outputLabel>
			<h:outputText id="a" value="#{ordersetupboxBean.Total()}$"
				style="color:#FFCC00;font-size:25px;margin-left:25px" />
			<br />
			<p:commandButton style="margin-left:205px" validateClient="true"
				disabled="#{ordersetupboxBean.Total()=='0'}" value="#{msg['btn_pay']}"
				action="#{ordersetupboxBean.payment()}"
				oncomplete="PF('bar').hide()"
				update=":panel:form2:mainform2,:payment,:growl" />
			<p:commandButton style="margin-left:10px" value="#{msg['btn_cancel']}"
				onclick="PF('bar').hide()" type="button" />
		</div>
	</p:notificationBar>

</h:body>
</html>